<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三层类别选择</title>
<style type="text/css">
legend {
	font-family: "微软雅黑";
	font-size: 20px;
}

fieldset {
	border: 1px dashed #ccc;
	margin: 5px;
	padding: 20px;
}
</style>
<link rel="stylesheet" type="text/css" href="./css/zj-select-multilevel.css">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/zj-select-multilevel.js"></script>
<!-- 调用方式 -->
<script>
	$(function() {
		$('#demo1').zj_select_multilevel({
			idFiled : "id",
			textFiled : "text",
			parentField : "pid",
			data : [ {
				"id" : "1",
				"text" : "哈哈1",
				"pid" : ""
			}, {
				"id" : "2",
				"text" : "呵呵2",
				"pid" : ""
			}, {
				"id" : "3",
				"text" : "嘿嘿3",
				"pid" : ""
			}, {
				"id" : "4",
				"text" : "嘿嘿4",
				"pid" : "1"
			}, {
				"id" : "5",
				"text" : "嘿嘿5",
				"pid" : "2"
			}, {
				"id" : "6",
				"text" : "嘿嘿6",
				"pid" : "3"
			}, {
				"id" : "7",
				"text" : "嘿嘿7",
				"pid" : "1"
			}, {
				"id" : "8",
				"text" : "哈哈8",
				"pid" : "5"
			}, {
				"id" : "9",
				"text" : "哈哈9",
				"pid" : "5"
			}, {
				"id" : "10",
				"text" : "哈哈10",
				"pid" : "6"
			}, {
				"id" : "11",
				"text" : "哈哈11",
				"pid" : "7"
			}, {
				"id" : "12",
				"text" : "哈哈12",
				"pid" : "7"
			} ]
		});
		$('#demo2').zj_select_multilevel({
			idFiled : "id",
			textFiled : "text",
			parentField : "pid",
			data : [ {
				"id" : "1",
				"text" : "哈哈1",
				"children" : [ {
					"id" : "4",
					"text" : "嘿嘿4",
					"children" : []
				}, {
					"id" : "7",
					"text" : "嘿嘿7",
					"children" : [ {
						"id" : "11",
						"text" : "哈哈11",
						"pid" : "7"
					}, {
						"id" : "12",
						"text" : "哈哈12",
						"pid" : "7"
					} ]
				} ]
			}, {
				"id" : "2",
				"text" : "呵呵2",
				"children" : [ {
					"id" : "5",
					"text" : "嘿嘿5",
					"children" : [ {
						"id" : "8",
						"text" : "哈哈8",
						"pid" : "5"
					}, {
						"id" : "9",
						"text" : "哈哈9",
						"pid" : "5"
					} ]
				} ]
			}, {
				"id" : "3",
				"text" : "嘿嘿3",
				"children" : [ {
					"id" : "6",
					"text" : "嘿嘿6",
					"children" : [ {
						"id" : "10",
						"text" : "哈哈10",
						"pid" : "6"
					} ]
				} ]
			} ]
		});

	});
</script>
</head>

<body>
	<fieldset>
		<legend>data初始化(id-pid)</legend>
		<select id="demo1">
		</select>
		<input type="button" value="获取value" onclick="alert($('#demo1').val())" />
		<input type="button" value="获取text" onclick="alert($('#demo1').find('option:selected').text())" />
	</fieldset>
	<fieldset>
		<legend>data初始化(children)</legend>
		<select id="demo2">
		</select>
		<input type="button" value="获取value" onclick="alert($('#demo2').val())" />
		<input type="button" value="获取text" onclick="alert($('#demo2').find('option:selected').text())" />
	</fieldset>
</body>
</html>
